<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="/business/css/style.css" />
<script src="/business/js/flexible.js" type="text/javascript" charset="utf-8"></script>
<script src="/business/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/business/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div id="app">
        <div class="top-bar">
            <a  href="javascript:window.history.back();"></a>
            <span style="font-size: 16px;font-weight: 600;color: #6c6c6c;">资金明细</span>
            <i onclick="window.location.href='/index'"></i>
        </div>
        <!-- 主体 -->
        <div class="container">
            <!-- 月份 -->
            <div class="month">
                <ul id="months">
                    <li :class="nav==1?'on':''" @click="changeNav(1)">1月</li>
                    <li :class="nav==2?'on':''" @click="changeNav(2)">2月</li>
                    <li :class="nav==3?'on':''" @click="changeNav(3)">3月</li>
                    <li :class="nav==4?'on':''" @click="changeNav(4)">4月</li>
                    <li :class="nav==5?'on':''" @click="changeNav(5)">5月</li>
                    <li :class="nav==6?'on':''" @click="changeNav(6)">6月</li>
                    <li :class="nav==7?'on':''" @click="changeNav(7)">7月</li>
                    <li :class="nav==8?'on':''" @click="changeNav(8)">8月</li>
                    <li :class="nav==9?'on':''" @click="changeNav(9)">9月</li>
                    <li :class="nav==10?'on':''" @click="changeNav(10)">10月</li>
                    <li :class="nav==11?'on':''" @click="changeNav(11)">11月</li>
                    <li :class="nav==12?'on':''" @click="changeNav(12)">12月</li>
                </ul>
            </div>
            <!-- 信息总览 -->
            <div class="total-info">
                <ul>
                    <li @click="changeCate(1)">
                        <p><i>¥</i><span id="srmoney">0.00</span></p>
                        <span>收入</span>
                    </li>
                    <li @click="changeCate(2)">
                        <p><i>¥</i><span id="tkmoney">0.00</span></p>
                        <span>退款</span>
                    </li>
                </ul>
            </div>
            <!-- 退款明细 -->
            <!--<div class="chart">
                <div class="title">
                    <h3>{{typeTitle}}</h3>
                    <div class="type">
                        <span :class="type==1?'on':''" @click="changeType(1)">收入</span>
                        <span :class="type==2?'on':''" @click="changeType(2)">退款</span>
                    </div>
                </div>
                <div id="chart"> </div>
            </div>-->
            <!-- 明细 -->
            <div class="detail">
                <div class="cate">
                    <span :class="cate==1?'on':''" @click="changeCate(1)">收入明细</span>
                    <span :class="cate==2?'on':''" @click="changeCate(2)">退款明细</span>
                </div>
                <ul v-if="cate==1" id="detail1"></ul>
                <ul v-else id="detail2"></ul>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    var that;
    new Vue({
        el: '#app',
        data: {
            nav:new Date().getMonth()+1, // 月份导航
            type:1, // 图表类型
            cate:1, // 明细分类
            chart: null, // 图表
            chartOptions:null,// 图表配置项
            typeTitle:"收入明细",
        },
        mounted: function () {
            that = this;
            let nowMonth = new Date().getMonth()+1;
            for(var i = nowMonth; i < 12; i++){
                $("#months li").eq(i).css('display', 'none')
            }
            this.$nextTick(function () {
                var month = new Date().getMonth()+1
                month = month.toString().length === 1 ? '0'+month : month;
                this.initChart(new Date().getFullYear()+"-"+month)
            })
            window.onresize = function () {
                that.chart.resize();
            }
        },
        methods: {
            initChart(date) {
                $.ajaxSetup({contentType: "application/json; charset=utf-8"});
                var data = {isDel:0,gtByType:"payMoney,0",status:"1<->3",orderByType:"createTime",createTime:date};
                var shouru = 0,tuikuan = 0;
                $("#detail1").empty()
                $("#detail2").empty()
                $.post("/cateringOrder/select",JSON.stringify(data), function (res) {
                    if(res.data.length == 0) {
                        $("#detail1").append('<li><div style="text-align: center;width: 100%;font-size: .3rem;color: #5b6275;">暂无数据</div></li>')
                        $("#detail2").append('<li><div style="text-align: center;width: 100%;font-size: .3rem;color: #5b6275;">暂无数据</div></li>')
                    }
                    for(var i in res.data) {
                        if (res.data[i].status == 1) {
                            shouru += res.data[i].payMoney / 1 * (1 - 0.009)
                            $("#detail1").append(
                                '<li><div class="l">' +
                                '<img src="/business/images/icon-sr.png" alt="">' +
                                '<div class="info"><p>'+res.data[i].orderNo+'</p>' +
                                '<span>'+res.data[i].createTime+'</span>' +
                                '</div></div><div class="r">' +
                                '<span>+'+parseFloat(res.data[i].payMoney/1*(1-0.009)).toFixed(2)+'</span>' +
                                '<i>'+res.data[i].nickName.substring(0,1)+'</i></div></li>'
                            )
                        }else{
                            tuikuan += res.data[i].payMoney/1
                            $("#detail2").append(
                                '<li><div class="l">' +
                                '<img src="/business/images/icon-tk.png" alt="">' +
                                '<div class="info"><p>'+res.data[i].orderNo+'</p>' +
                                '<span>'+res.data[i].createTime+'</span>' +
                                '</div></div><div class="r">' +
                                '<span>-'+res.data[i].payMoney+'</span>' +
                                '<i>'+res.data[i].nickName.substring(0,1)+'</i></div></li>'
                            )
                        }
                    }
                }).done(function(){
                    $("#srmoney").html(parseFloat(shouru).toFixed(2))
                    $("#tkmoney").html(parseFloat(tuikuan).toFixed(2))
                })
            },
            // 切换导航
            changeNav:function(item){
                this.nav = item
                var moneth = item
                moneth = moneth.toString().length === 1 ? '0'+moneth : moneth;
                console.log(new Date().getFullYear()+"-"+moneth)
                this.initChart(new Date().getFullYear()+"-"+moneth)
            },
            // 切换收入退款
            changeType:function(item){
                this.type = item
                if(item==1){
                    this.typeTitle="收入明细"
                }else{
                    this.typeTitle="退款明细";
                }
            },
            // 切换类型
            changeCate:function(item){
                this.cate = item
                var moneth = this.nav
                moneth = moneth.toString().length === 1 ? '0'+moneth : moneth;
                console.log(new Date().getFullYear()+"-"+moneth)
                this.initChart(new Date().getFullYear()+"-"+moneth)
            }

        }
    })
</script>